<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>公厕维保未完成报警</title>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>

<link type="text/css" rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css" />
</head>
<body>
<div id="app">
  <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="aa"
        label="公厕名称"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="bb"
        label="负责人员"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cc"
        align="center"
        label="标准次数">
      </el-table-column>
      <el-table-column
        prop="dd"
        align="center"
        label="实际次数">
      </el-table-column>
      <el-table-column
        prop="ee"
        align="center"
        label="离岗次数">
      </el-table-column>
      <el-table-column
        prop="ff"
        align="center"
        label="离岗时长">
      </el-table-column>
    </el-table>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    tableData: [{
            aa: '富安路公厕男厕',
            bb: '吴茂营',
            cc: '3',
            dd: '0',
            ee: '0',
            ff: '0'
          }, {
            aa: '民和巷中轴厕所女厕',
            bb: '张德军',
            cc: '3',
            dd: '1',
            ee: '2',
            ff: '45'
          }]
  }
})
</script>
</body>
</html>